<template>
	<view class="roc-input">
		<u-input
			:value="newValue"
			@input="changeValue"
			:type="item.props.type || 'text'"
			:disabled="item.props.disabled || false"
			:clearable="item.props.clearable || false"
			:maxlength="item.props.maxlength || 140"
			:placeholder="item.props.placeholder || '请填写'"
			:showWordLimit="item.props.showWordLimit || false"
			:focus="item.props.autofocus || false"
			:readonly="item.props.readonly || false"
			:prefixIcon="item.props.prefixIcon || ''"
			:prefixIconStyle="{ fontSize: '26rpx' }"
			:suffixIcon="item.props.suffixIcon || ''"
			:suffixIconStyle="{ fontSize: '26rpx' }"
			border="none"
		>
			<template #suffix>
				<text class="input-right-slot" v-if="item.type == 'input'">{{ item.children[0].children[0] }}</text>
			</template>
		</u-input>
	</view>
</template>

<script>
export default {
	name: 'roc-input',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		value: {
			type: String,
			default: ''
		}
	},
	watch: {
		value:{
			handler(newVal) {
				this.newValue = newVal.replace('!!!', '')
			},
		}
	},
	data() {
		return {
			newValue: ''
		};
	},
	methods: {
		changeValue(value) {
			this.$emit('input', `!!!${value}`)
		}
	}
};
</script>

<style lang="scss">
.roc-input {
	width: 100%;
	.input-box {
		margin: 10rpx 0;
	}
}
</style>
